<template>
  <!-- 标签管理 -->
  <div class="tags">
    <!-- 左侧标签栏 -->
    <div class="tags-left">
      <!-- 顶部提示 -->
      <div class="top">
        <span>标签组</span>
        <div class="addtags" @click.prevent.stop="addtags">
          <img src="../assets/images/add@2x.png" alt="" />
        </div>
      </div>
      <!-- 标签组主体内容 -->
      <div class="main" ref="leftlistWrap">
        <div
          class="tags-list"
          v-for="(item, index) in tagsList"
          :key="item.id"
          :class="[
            item.default == false ? 'tags-active' : '',
            isreame == index ? 'tags-rename' : '',
            isactive == index ? 'tags-rename' : '',
          ]"
          @contextmenu.prevent="operate(index)"
          @click="showtags(index)"
        >
          <!-- 标签名 -->
          <div class="slot flex-center">
            <!-- 圆圈图标 -->
            <div class="circle"></div>
            <!-- 标签组名 -->
            <div class="name" v-show="isreame != index" :title="item.name">{{ ellipsis(item.name , 15) }}</div>
            <!-- 重命名操作后的标签组 -->
            <div v-show="isreame == index" class="input">
              <el-input
                :autofocus="true"
                v-model="item.name"
                :placeholder="item.placeholder"
                @keyup.enter.native="creat(index)"
                @blur="creat(index)"
                ref="inp"
                maxlength="200"
              ></el-input>
            </div>
          </div>
          <!-- 操作弹窗 -->
          <div class="operate" v-show="rightactive == index">
            <div class="rename" @click.prevent.stop="rename(index)">重命名</div>
            <div class="del" @click.prevent.stop="del(index)">删除</div>
          </div>
          <!-- 数量 -->
          <!-- <div class="number">{{ item.categoryTypeList.length }}</div> -->
        </div>
      </div>
    </div>
    <div class="tags-right">
      <div class="labelone">
        <p>{{ title }}</p>
        <em class="el-icon-plus" @click="tianjia" />
      </div>
      <!--       右侧查询框     -->
      <div class="seakuang" v-show="this.tian == true">
        <!--    搜索框        -->
        <div class="seainp">
          <img src="../assets/images/sousuo.png" alt="" />
          <!-- <input maxlength="100" type="text" v-model="catename" @keyup.enter="add" /> -->
          <!-- 改为回车直接添加 -->
          <input
            maxlength="100"
            type="text"
            v-model="catename"
            @input="inputChange"
            @keyup.enter="addTag(catename)"
          />
        </div>
        <!-- <div class="numb" v-for="(item,index) in labellist" :key="index">
          <p @click="biao(item.categoryName)">{{item.categoryName}}</p>
        </div> -->
        <div class="numb" v-show="this.visable">
          <ul class="list">
            <li
              v-for="(item, index) in tagSearchList"
              :key="index"
              @click="addTag(item.categoryName)"
            >
              {{ item.categoryName }}
            </li>
          </ul>
        </div>
      </div>
      <div class="label-group">
        <tagsGroup
          :showTagsArr="this.showTagsArr"
          :close="true"
          @editSingleTag="editSingleTag"
          ref="singleTag"
        />
      </div>
    </div>
    <el-dialog title="编辑标签" :visible.sync="dialogVisible">
      <div class="item-con flex-center">
        <span class="label">标签名称:</span>
        <div class="item">
          <input
            maxlength="100"
            class="input"
            v-model="tagItem.categoryName"
            placeholder="请输入..."
          />
        </div>
      </div>
      <div class="footer flex-center">
        <div class="cancel" @click="dialogVisible = false">取消</div>
        <div class="confirm" @click="submit">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tagsGroup from "../components/common/tagsGroup";
import { mapState } from "vuex";
// const tags = [];
export default {
  components: { tagsGroup },
  data() {
    return {
      dialogVisible: false, // 标签编辑弹窗
      tagItem: "", // 双击获取当前点击标签信息 标签名称
      visable: false,
      // tags,
      tagsList: [],
      title: "",
      tian: false,
      catename: "",
      //左侧鼠标单击
      isactive: 0,
      //鼠标右击
      rightactive: -1,
      //重命名
      isreame: -1,
      labellist: [],
      showTagsArr: [],
      clickId: "",
      key: 1,
      tagSearchList: [{ categoryName: "" }],
      name: "",
    };
  },
  computed: {
    ...mapState({
      user(state) {
        return state.user;
      },
    }),
  },
  created() {
    if (this.user.userRole != 1) {
      this.$router.push("/");
      return;
    }
    this.findAll();
    this.allCategoryAndGroup();

    //接口
    this.searchTags();

    this.findAllCateGory();
  },
  methods: {
    ellipsis(name,len){
      if(name.length > len){
          return name.slice(0,len) + "" + "..."
      }else{
          return name
      }
    },
    editSingleTag(item) {
      this.dialogVisible = true;
      this.tagItem = item;
    },
    submit() {
      if (this.tagItem.categoryName) {
        console.log(111);
        this.$api
          .updateSingleTag({
            categoryName: this.tagItem.categoryName,
            groupId: this.tagItem.groupId,
            id: this.tagItem.id,
          })
          .then((res) => {
            let resdata = res.split(",");
            let code = resdata[0];
            let info = resdata[1];
            let typeStr = "success";

            if (code == 500) {
              typeStr = "error";
            }
            this.dialogVisible = false;
            this.$refs.singleTag.editTag();
            this.$message({
              // message: res.msg,
              message: info,
              type: typeStr,
              showClose: true,
            });
          });
      }
    },
    // 搜索图标
    seainp() {
      this.tian = false;
    },
    //鼠标右击打开操作弹窗
    operate(index) {
      this.isreame = -1;
      this.rightactive = index;
      this.isactive = index;
    },
    //显示标签
    showtags(index) {
      // 隐藏添加弹窗
      this.tian = false;
      this.visable = false;
      this.showTagsArr = [];
      if (!this.tagsList[index].rename) {
        this.labellist = this.tagsList[index].taglist;
        this.title = this.tagsList[index].name;
        this.clickId = this.tagsList[index].id;
        this.$api.findByGroupIdQuery(this.clickId).then((res) => {
          let arr = [];
          for (let i = 0; i < res.length; i++) {
            arr.push(res[i].id);
          }
          this.showTagsArr = arr;
        });
      }
      this.isactive = index;
      this.rightactive = -1;
    },
    // 重命名
    rename(index) {
      this.rightactive = -1;
      this.key = 2;
      if (!this.tagsList[index].default) {
        this.isreame = index;
      } else {
        this.isreame = -1;
      }
    },
    //  删除
    del(index) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.rightactive = -1;
        // this.tagsList[index].opshow=false;
        // 删除不重新请求接口
        if (!this.tagsList[index].default) {
          this.$api.deleteTags({ id: this.tagsList[index].id }).then((res) => {
            this.$message({
              message: res.msg,
              type: "info",
              showClose: true,
            });
            this.$api.allCategoryAndGroup().then((res) => {
              this.tagsList = res;
              this.title = res[0].name;
              this.clickId = res[0].id;
              this.isactive = 0;
              this.showTagsArr = [];
              for (let i = 0; i < res[0].categoryTypeList.length; i++) {
                this.showTagsArr.push(res[0].categoryTypeList[i].id);
              }
            });
          });
          // this.tagsList.splice(index, 1);
          this.key = 3;
        }
      });
    },
    // 新建标签组
    addtags() {
      if (this.tagsList[0].placeholder == "新建标签组") {
        this.$message({
          message: "请先重命名已有新建空白标签组！",
          type: "warning",
          showClose: true,
        });
        return false;
      }
      this.rightactive = -1;
      const item = {
        //标签名
        name: "新建标签组",
        placeholder: "新建标签组",
        //数量
        number: "0",
        //是否默认
        default: false,
        taglist: [],
      };
      this.tagsList.unshift(item);
      // this.isreame = this.tagsList.length - 1;
      this.isreame = 0;
      this.key = 1;
      // 移动到最顶端
      this.$refs.leftlistWrap.scrollTop = 0;
    },

    // 新建标签组完成
    creat(index) {
      if (this.tagsList[index].name !== "") {
        this.isreame = -1;
        // 新增标签组
        if (this.key === 1) {
          this.$api
            .addTags({
              // isInherent: 0,
              name: this.tagsList[index].name,
            })
            .then((data) => {
              if (data.code == 500) {
                this.$message({
                  type: "warning",
                  message: data.msg,
                  showClose: true,
                });
                this.$api.allCategoryAndGroup().then((res) => {
                  this.tagsList = res;
                  this.title = this.name;
                  for (let i = 0; i < res.length; i++) {
                    if (res[i].name === this.name) {
                      this.isactive = i;
                    }
                  }
                  this.clickId = res[index].id;
                });
                return false;
              }
              this.name = this.tagsList[index].name;
              this.title = this.name;
              this.clickId = this.tagsList[index].id;
              this.isactive = index;
              this.showTagsArr = [];
              this.$api.allCategoryAndGroup().then((res) => {
                this.tagsList = res;
                this.title = this.name;
                for (let i = 0; i < res.length; i++) {
                  if (res[i].name === this.name) {
                    this.isactive = i;
                  }
                }
                this.clickId = res[index].id;
              });
            });
        }
        // 重命名
        else if (this.key === 2) {
          this.$api
            .updateTags({
              id: this.clickId,
              // isInherent: 0,
              name: this.tagsList[index].name,
            })
            .then((data) => {
              this.$message({
                type: "info",
                message: data.msg,
                showClose: true,
              });
              this.$api.allCategoryAndGroup().then((res) => {
                this.tagsList = res;
                this.title = res[index].name;
              });
            });
        }
      } else {
        return false;
      }
    },
    reload() {
      location.reload();
    },
    // 右侧加号添加
    tianjia() {
      if (this.tian == false) {
        this.tian = true;
        this.visable = true;
      } else {
        this.tian = false;
        this.visable = false;
      }
    },
    biao(categoryName) {
      this.catename = categoryName;
    },
    inputChange() {
      this.add();
    },
    //右侧搜索框回车添加，搜索框消失
    add() {
      if (this.catename !== "") {
        this.$api
          .searchTags({
            categoryName: this.catename,
          })
          .then((res) => {
            if (res.length === 0) {
              this.tagSearchList = [{ categoryName: "" }];
              this.tagSearchList[0].categoryName = this.catename;
            } else {
              this.tagSearchList = res;
            }
          });
      }
    },
    addTag(e) {
      this.$api
        .addTagCat({
          categoryName: e,
          groupId: this.clickId,
          name: e,
        })
        .then((res) => {
          if (res.indexOf("200") > -1) {
            this.$api.findByGroupIdQuery(this.clickId).then((data) => {
              let arr = [];
              for (let i = 0; i < data.length; i++) {
                arr.push(data[i].id);
              }
              this.showTagsArr = arr;
              this.$api.findAllTag().then((r) => {
                this.$store.commit("app/setAllTags", r);
              });
            });

            this.visable = false;
            this.tian = false;
          } else {
            this.$message({
              type: "warning",
              message: res.split(",")[1],
              showClose: true,
            });
          }
        });
    },
    // 根据id删除标签  成功
    async delId() {
      await this.$api.delTag(3);
    },
    // 查询所有的标签-按照标签首字母分组   成功
    async findAll() {
      await this.$api.findAllGroupByCateGory();
    },
    // 查询标签组及其下标签  成功
    async allCategoryAndGroup() {
      let data = await this.$api.allCategoryAndGroup();
      this.tagsList = data;
      this.title = data[0].name;
      this.clickId = data[0].id;
      for (let i = 0; i < data[0].categoryTypeList.length; i++) {
        this.showTagsArr.push(data[0].categoryTypeList[i].id);
      }
      for (let i = 0; i < this.tagsList.length; i++) {
        if (this.tagsList[i].categoryTypeList.length != 0) {
          for (let j = 0; j < this.tagsList[i].categoryTypeList.length; j++) {
            this.labellist.push(
              this.tagsList[i].categoryTypeList[j].categoryName
            );
          }
        }
      }
    },
    // 查询所有标签
    async findAllCateGory() {
      await this.$api.findAllCateGory();
    },

    //根据标签名词模糊查询标签 成功
    async searchTags() {
      let data = await this.$api.searchTags({
        categoryName: this.catename,
      });
      this.labellist = data;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.input .el-input__inner {
  width: 1.7rem;
  height: 0.3rem;
  background: #a0a0a0;
  color: white;
  border: none;
  padding: 0.06rem 0.13rem;
}

.tags {
  display: flex;
  // height: calc(100vh - 0.76rem);
  height: 100%;
  .tags-left {
    width: 2.87rem;
    height: calc(100% - 0.2rem);
    box-sizing: border-box;
    margin-top: 0.2rem;
    background: url(~@/assets/common/rectangle3.png) no-repeat;
    background-size: 105% 100%;
    background-position: center;
    .top {
      padding: 0 0.21rem 0 0.28rem;
      height: 0.6rem;
      justify-content: space-between;
      align-items: center;
      display: flex;
      font-size: 0.18rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 0.23rem;
      .addtags {
        width: 0.25rem;
        height: 0.25rem;
        cursor: pointer;
        > img {
          width: 0.23rem;
        }
      }
    }

    .main {
      @include scrollBar;
      overflow-y: auto;
      height: calc(100vh - 2rem);
      padding: 0 0.1rem;
      font-size: 0.14rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #959595;

      .tags-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        cursor: pointer;
        margin-bottom: 0.08rem;
        height: 0.4rem;
        .slot {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .circle {
            width: 0.1rem;
            height: 0.1rem;
            border-radius: 50%;
            background-color: #959595;
            margin-right: 0.15rem;
            margin-left: 0.17rem;
          }
        }

        .number {
          margin-right: 0.17rem;
        }

        .operate {
          width: 1.08rem;
          /*height: 0.74rem;*/
          position: absolute;
          z-index: 122;
          top: 0.2rem;
          right: 0.25rem;
          padding: 0.16rem;
          box-shadow: 0rem 0rem 0.1rem #000;
          background: rgba(98, 98, 98, 0.79);
          /*background-color: red;*/
          border-radius: 0.04rem;

          .rename {
            color: #ffffff;
            margin-bottom: 0.16rem;
            cursor: pointer;
          }

          .del {
            color: #ffffff;
            cursor: pointer;
          }
        }
      }

      .tags-active {
        color: #ffffff;

        .slot {
          .circle {
            background-color: #ffffff;
          }
        }
      }

      .tags-rename {
        background: url(~@/assets/common/rectangle821.png) no-repeat; //背景色
        background-position: 100% 100%;
        background-size: 100%;
        border-radius: 0.03rem;
      }
    }
  }
  .el-dialog {
    color: #ffffff;
    font-size: 0.16rem;
    width: 7.2rem !important;
    background: #474747;
    box-shadow: 0rem 0rem 0.38rem 0rem rgba(0, 0, 0, 0.45);
    border-radius: 0.05rem;
    .el-dialog__header {
      padding: 0.16rem;
      background: #143853 !important;
    }
    .el-dialog__title {
      color: #ffffff;
    }
    .el-dialog__body {
      color: #ffffff;
      background: #0f2d43 !important;
    }
    .item-con {
      margin-bottom: 0.2rem;
      color: #ffffff;
      .input {
        color: white;
        margin-left: 0.12rem;
        padding-left: 0.12rem;
        cursor: pointer;
        width: 5.2rem;
        height: 0.38rem;
        background: #0355a4 !important;
        border-radius: 0.05rem;
        &::-webkit-input-placeholder {
          color: white;
        }
        &::-ms-input-placeholder {
          color: white;
        }
        &::-moz-placeholder {
          color: white;
        }
      }
      .el-button {
        width: 1.2rem;
        height: 0.38rem;
        background: #62656c;
        border-radius: 0.05rem;
      }
    }
    .footer {
      margin-top: 0.1rem;
      color: #ffffff;
      margin-right: 0.3rem;
      justify-content: flex-end;
      .cancel {
        text-align: center;
        width: 1.2rem;
        height: 0.38rem;
        line-height: 0.38rem;
        background: #62656c;
        border-radius: 0.05rem;
      }
      .confirm {
        margin-left: 0.2rem;
        text-align: center;
        width: 1.2rem;
        height: 0.38rem;
        line-height: 0.38rem;
        background: #1890ff;
        border-radius: 0.05rem;
      }
    }
  }
}

/*    右侧部分*/
.tags-right {
  width: calc(100vw - 3rem);
  padding-top: 0.835rem;
  padding-left: 0.6625rem;

  .label-group {
    padding: 0.38rem 0;
  }
}

.labelone {
  font-size: 0.24rem;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  position: relative;

  .el-icon-plus {
    margin-left: 0.375rem;
    cursor: pointer;
  }
}

/*   右侧搜索框*/
.seakuang {
  width: 4.38rem;
  /*min-height: 1.45rem;*/
  // background: #474747;#0f2d43 !important
  background: #0f2d43;
  box-shadow: 0rem 0rem 0.38rem 0rem rgba(0, 0, 0, 0.45);
  border-radius: 0.05rem;
  position: absolute;
  top: 1.6rem;
  left: 5.82rem;
  z-index: 100;
}

.seainp {
  width: 4.05rem;
  height: 0.38rem;
  background: #0355a4;
  border-radius: 0.05rem;
  margin: 0.2rem auto;
  display: flex;
  align-items: center;

  img {
    width: 0.19rem;
    height: 0.19rem;
    margin-left: 0.137rem;
    /*cursor: pointer;*/
  }

  input {
    margin-left: 0.137rem;
    font-size: 0.16rem;
    color: white;
  }
}

.numb {
  .list {
    max-height: 2rem;
    overflow: auto;
    @include scrollBar;
    li {
      padding: 0.06rem 0.2rem;
      color: #ffffff;
      cursor: pointer;
    }
  }
  p {
    margin-bottom: 0.2rem;
    font-size: 0.16rem;
    color: #ffffff;
    border-radius: 0.05rem;
    padding-left: 0.537rem;
    padding-right: 0.25rem;
    cursor: pointer;
    word-break: normal;
    /*white-space: pre-warp;*/
    word-wrapl: break-word;
  }
}

/*.numb:hover {*/
/*    background: #4875E8;*/
/*}*/
</style>
